<template>
  <section class="todoapp">
    <TodoHeader />

    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        @change="handleChange"
      />

      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <TodoItem v-for="item in displayTodos" :key="item.id" v-bind="item" />
      </ul>
    </section>

    <TodoFooter />
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import TodoHeader from "./TodoHeader.vue";
import TodoItem from "./TodoItem.vue";
import TodoFooter from "./TodoFooter.vue";

export default {
  components: {
    TodoHeader,
    TodoItem,
    TodoFooter,
  },

  computed: {
    ...mapGetters(["displayTodos"]),
  },

  methods: {
    handleChange(event) {
      const checked = event.target.checked;

      this.$store.dispatch("updateBatchTodo", checked);
    },
  },

  created() {
    // 派发 getTodoList 动作
    this.$store.dispatch("getTodoList");
  },
};
</script>

<style>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css";
</style>
